<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI摘要管理后台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/toastify-js/1.12.0/toastify.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.9.0/min/vs/loader.js"></script>
    <link rel="stylesheet" href="/static/css/output.css">
</head>
<body>
    <div class="drawer lg:drawer-open">
        <input id="drawer-toggle" type="checkbox" class="drawer-toggle" />
        
        <!-- 侧边栏 -->
        <div class="drawer-side">
            <label for="drawer-toggle" class="drawer-overlay"></label>
            <div class="menu p-4 w-72 min-h-full bg-base-200 text-base-content relative">
                <!-- 收缩按钮 -->
                <button id="sidebar-collapse-btn" class="sidebar-collapse-btn hidden lg:flex">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                </button>

                <!-- 标题 -->
                <div class="sidebar-header">
                    <h2 class="text-xl font-bold menu-title">AI摘要管理后台</h2>
                </div>

                <!-- 菜单项 -->
                <ul class="menu-list space-y-4">
                    <li>
                        <a href="#dashboard" class="active p-3 hover:bg-base-300 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                            <span class="ml-3">仪表盘</span>
                        </a>
                    </li>
                    <li>
                        <a href="#summaries" class="flex items-center p-3 hover:bg-base-300 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                            <span class="ml-3">摘要管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#config" class="flex items-center p-3 hover:bg-base-300 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <span class="ml-3">系统配置</span>
                        </a>
                    </li>
                    <li>
                        <a href="#themes" class="flex items-center p-3 hover:bg-base-300 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                            </svg>
                            <span class="ml-3">主题管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#accounts" class="flex items-center p-3 hover:bg-base-300 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                            <span class="ml-3">账户管理</span>
                        </a>
                    </li>
                    <li class="mt-auto">
                        <a href="/admin/logout" class="flex items-center p-3 hover:bg-base-300 rounded-lg text-error">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                            </svg>
                            <span class="ml-3">退出登录</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="drawer-content">
            <!-- 顶部导航栏 -->
            <div class="navbar bg-base-100 lg:hidden">
                <div class="flex-none">
                    <label for="drawer-toggle" class="btn btn-square btn-ghost drawer-button">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </label>
                </div>
                <div class="flex-1">
                    <h1 class="text-xl font-bold">AI摘要管理后台</h1>
                </div>
            </div>

            <!-- 主要内容区域 -->
            <div id="dashboard" class="p-4">
                <h2 class="text-2xl font-bold mb-4">仪表盘</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                    <div class="stats shadow">
                        <div class="stat">
                            <div class="stat-title">总摘要数</div>
                            <div class="stat-value" id="totalSummaries">...</div>
                        </div>
                    </div>
                    <div class="stats shadow">
                        <div class="stat">
                            <div class="stat-title">今日生成</div>
                            <div class="stat-value" id="todaySummaries">...</div>
                        </div>
                    </div>
                    <div class="stats shadow">
                        <div class="stat">
                            <div class="stat-title">API调用次数</div>
                            <div class="stat-value" id="apiCalls">...</div>
                        </div>
                    </div>
                    <div class="stats shadow">
                        <div class="stat">
                            <div class="stat-title">缓存命中率</div>
                            <div class="stat-value" id="cacheHitRate">...</div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <!-- 最近生成的摘要 -->
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h3 class="card-title">最近生成的摘要</h3>
                            <div class="overflow-x-auto" id="recentSummaries">
                                <table class="table table-zebra">
                                    <thead>
                                        <tr>
                                            <th>文章ID</th>
                                            <th>更新时间</th>
                                            <th>摘要预览</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 动态加载内容 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 系统状态 -->
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h3 class="card-title">系统状态</h3>
                            <div class="overflow-x-auto">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>API状态</td>
                                            <td><span class="badge badge-success">正常</span></td>
                                        </tr>
                                        <tr>
                                            <td>数据库状态</td>
                                            <td><span class="badge badge-success">正常</span></td>
                                        </tr>
                                        <tr>
                                            <td>缓存状态</td>
                                            <td><span class="badge badge-success">正常</span></td>
                                        </tr>
                                        <tr>
                                            <td>系统负载</td>
                                            <td><progress class="progress progress-success w-56" value="40" max="100"></progress></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="summaries" class="p-4 hidden">
                <h2 class="text-2xl font-bold mb-4">摘要管理</h2>
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <div class="overflow-x-auto">
                            <table class="table table-zebra w-full">
                                <thead>
                                    <tr>
                                        <th>文章ID</th>
                                        <th>最后更新时间</th>
                                        <th>摘要</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for summary in summaries %}
                                    <tr>
                                        <td>{{ summary.article_id }}</td>
                                        <td>{{ summary.last_updated.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                        <td>
                                            <button onclick="showSummaryModal(`{{ summary.summary | replace('`', '\\`') }}`)" 
                                                    class="link link-primary">
                                                {{ summary.summary[:100] }}...
                                            </button>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-info" onclick="refreshSummary('{{ summary.article_id }}')">刷新</button>
                                                <button class="btn btn-sm btn-error" onclick="deleteSummary('{{ summary.article_id }}')">删除</button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div id="config" class="p-4 hidden">
                <h2 class="text-2xl font-bold mb-4">系统配置</h2>
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <form id="configForm" onsubmit="saveConfig(event)">
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text">API Key</span>
                                </label>
                                <input type="password" name="api_key" value="{{ config.DASHSCOPE_API_KEY }}" class="input input-bordered" />
                            </div>
                            <div class="form-control mt-4">
                                <label class="label">
                                    <span class="label-text">Base URL</span>
                                </label>
                                <input type="text" name="base_url" value="{{ config.BASE_URL }}" class="input input-bordered" />
                            </div>
                            <div class="form-control mt-4">
                                <label class="label">
                                    <span class="label-text">System Content</span>
                                </label>
                                <textarea name="system_content" class="textarea textarea-bordered" rows="3">{{ config.SYSTEM_CONTENT }}</textarea>
                            </div>
                            <div class="form-control mt-4">
                                <label class="label">
                                    <span class="label-text">CORS Origin</span>
                                </label>
                                <input type="text" name="cors_origin" value="{{ config.CORS_ORIGIN }}" class="input input-bordered" />
                            </div>
                            <div class="form-control mt-4">
                                <label class="label">
                                    <span class="label-text">AI 模型</span>
                                </label>
                                <select name="model" class="select select-bordered">
                                    <option value="qwen-plus" {% if config.MODEL == 'qwen-plus' %}selected{% endif %}>通义千问 Plus</option>
                                    <option value="qwen-max" {% if config.MODEL == 'qwen-max' %}selected{% endif %}>通义千问 Max</option>
                                    <option value="qwen-turbo" {% if config.MODEL == 'qwen-turbo' %}selected{% endif %}>通义千问 Turbo</option>
                                </select>
                            </div>
                            <div class="card-actions justify-end mt-6">
                                <button type="submit" class="btn btn-primary">保存配置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div id="themes" class="p-4 hidden">
                <h2 class="text-2xl font-bold mb-4">主题管理</h2>
                
                <!-- 添加提示信息卡片 -->
                <div class="alert alert-info mb-4 shadow-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div>
                        <h3 class="font-bold">主题开发指南</h3>
                        <div class="text-sm">
                            <p>1. 必须使用 HTML + CSS 进行编写</p>
                            <p>2. 必须包含 <code class="bg-base-200 px-1 rounded">&lt;div class="summary"&gt;&lt;/div&gt;</code> 作为摘要显示区域</p>
                            <p>3. 建议使用 <a href="https://v0.dev" target="_blank" class="link link-primary">v0.dev</a> 辅助设计，可复制 light 主题的代码作为模板</p>
                        </div>
                    </div>
                </div>

                <!-- 现有的主题卡片网格 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6">

                    {% for theme in themes %}
                    <div class="card bg-base-100 shadow-xl {% if theme.name == current_theme %}border-2 border-primary{% endif %}">
                        <div class="card-body p-6">
                            <div class="flex justify-between items-start">
                                <h3 class="card-title">{{ theme.name }}</h3>
                                <div class="dropdown dropdown-end">
                                    <button tabindex="0" class="btn btn-ghost btn-xs btn-square">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                                        </svg>
                                    </button>
                                    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                                        <li><a href="/admin/theme-editor/{{ theme.name }}" target="_blank">编辑</a></li>
                                        <li><a onclick="showThemeSettings('{{ theme.name }}')">设置</a></li>
                                        <li><a onclick="confirmDeleteTheme('{{ theme.name }}')" class="text-error">删除</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="preview-wrapper min-h-[200px] w-full resize-y overflow-auto border border-base-300 rounded-lg">
                                <iframe id="preview-frame-{{ theme.name }}" 
                                        class="w-full h-full min-h-[200px] border-0"
                                        srcdoc=""
                                        title="{{ theme.name }} preview">
                                </iframe>
                            </div>
                            <div class="card-actions justify-end mt-4">
                                <button class="btn btn-primary" onclick="applyTheme('{{ theme.name }}')">应用</button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    
                    <div class="card bg-base-100 shadow-xl min-w-[300px] min-h-[300px]">
                        <div class="card-body flex items-center justify-center">
                            <button class="btn btn-ghost btn-lg" onclick="showNewThemeModal()">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-8 h-8 stroke-current">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                                </svg>
                                <span>新建主题</span>
                            </button>
                        </div>
                    </div>

                    <div class="card bg-base-100 shadow-xl min-w-[300px] min-h-[300px]">
                        <div class="card-body flex items-center justify-center">
                            <label for="theme-upload" class="btn btn-ghost btn-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-8 h-8 stroke-current">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                                </svg>
                                <span>上传主题</span>
                            </label>
                            <input type="file" id="theme-upload" accept=".html" class="hidden" onchange="handleThemeUpload(event)">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主题编辑弹窗 -->
            <dialog id="themeEditModal" class="modal">
                <div class="modal-box w-11/12 max-w-5xl">
                    <h3 class="font-bold text-lg mb-4">编辑主题</h3>
                    <div id="monaco-editor" style="height: 500px; border: 1px solid #ccc;"></div>
                    <div class="modal-action">
                        <button class="btn btn-ghost" onclick="closeThemeEditor()">取消</button>
                        <button class="btn btn-primary" onclick="saveThemeEdit()">保存</button>
                    </div>
                </div>
            </dialog>

            <div id="accounts" class="p-4 hidden">
                <h2 class="text-2xl font-bold mb-4">账户管理</h2>
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <form id="profile-form" class="max-w-md mx-auto">
                            <div class="form-control mb-4">
                                <label class="label">
                                    <span class="label-text">当前用户名</span>
                                </label>
                                <input type="text" id="current_username" class="input input-bordered" readonly>
                            </div>
                            <div class="form-control mb-4">
                                <label class="label">
                                    <span class="label-text">当前密码</span>
                                    <span class="label-text-alt text-error">*必填</span>
                                </label>
                                <input type="password" name="current_password" class="input input-bordered" required>
                                <label class="label">
                                    <span class="label-text-alt text-gray-500">请输入当前密码以验证身份</span>
                                </label>
                            </div>
                            <div class="form-control mb-4">
                                <label class="label">
                                    <span class="label-text">新用户名</span>
                                    <span class="label-text-alt text-gray-500">可选</span>
                                </label>
                                <input type="text" name="new_username" class="input input-bordered">
                                <label class="label">
                                    <span class="label-text-alt text-gray-500">如需修改用户名请在此输入</span>
                                </label>
                            </div>
                            <div class="form-control mb-4">
                                <label class="label">
                                    <span class="label-text">新密码</span>
                                    <span class="label-text-alt text-gray-500">可选</span>
                                </label>
                                <input type="password" name="new_password" class="input input-bordered">
                                <label class="label">
                                    <span class="label-text-alt text-gray-500">如需修改密码请在此输入</span>
                                </label>
                            </div>
                            <div class="form-control mt-6">
                                <button type="submit" class="btn btn-primary" disabled>更新信息</button>
                                <label class="label">
                                    <span class="label-text-alt text-gray-500">请至少填写新用户名或新密码其中之一才能更新</span>
                                </label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 摘要详情弹窗 -->
    <dialog id="summaryModal" class="modal">
        <form method="dialog" class="modal-box">
            <h3 class="font-bold text-lg">摘详情</h3>
            <p id="modalSummaryContent" class="py-4 whitespace-pre-wrap"></p>
            <div class="modal-action">
                <button class="btn">关闭</button>
            </div>
        </form>
    </dialog>

    <!-- 新建主题弹窗 -->
    <dialog id="newThemeModal" class="modal">
        <form method="dialog" class="modal-box">
            <h3 class="font-bold text-lg">新建主题</h3>
            <div class="form-control mt-4">
                <label class="label">
                    <span class="label-text">主题名称</span>
                </label>
                <input type="text" id="newThemeName" class="input input-bordered" required />
            </div>
            <div class="modal-action">
                <button class="btn btn-ghost">取消</button>
                <button class="btn btn-primary" onclick="createNewTheme()">创建</button>
            </div>
        </form>
    </dialog>

    <!-- 新建管理员弹窗 -->
    <dialog id="adminModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg" id="adminModalTitle">新建管理员</h3>
            <form id="adminForm" onsubmit="handleAdminSubmit(event)" class="mt-4">
                <input type="hidden" name="action" value="create">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">用户名</span>
                    </label>
                    <input type="text" name="username" class="input input-bordered" required />
                </div>
                <div class="form-control mt-4">
                    <label class="label">
                        <span class="label-text">密码</span>
                    </label>
                    <input type="password" name="password" class="input input-bordered" required />
                </div>
                <div class="form-control mt-4">
                    <label class="label">
                        <span class="label-text">邮箱</span>
                    </label>
                    <input type="email" name="email" class="input input-bordered" required />
                </div>
                <div class="form-control mt-4">
                    <label class="label">
                        <span class="label-text">角色</span>
                    </label>
                    <select name="role" class="select select-bordered">
                        <option value="admin">管理员</option>
                        <option value="editor">编辑</option>
                    </select>
                </div>
                <div class="modal-action">
                    <button type="button" class="btn btn-ghost" onclick="closeAdminModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </dialog>

    <!-- 修改主题设置对话框 -->
    <dialog id="themeSettingsModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4">主题设置</h3>
            <form id="themeSettingsForm">
                <div class="form-control mb-4">
                    <label class="label">
                        <span class="label-text">第三方 CSS</span>
                        <button type="button" class="btn btn-xs btn-ghost" onclick="addCssInput()">添加</button>
                    </label>
                    <div id="cssInputs">
                        <!-- CSS 输入框将动态添加到这里 -->
                    </div>
                    <label class="label">
                        <span class="label-text-alt text-warning">注意：此设置仅在预览时生效，不会修改主题文件</span>
                    </label>
                </div>
                <div class="form-control mb-4">
                    <label class="label">
                        <span class="label-text">第三方 JavaScript</span>
                        <button type="button" class="btn btn-xs btn-ghost" onclick="addJsInput()">添加</button>
                    </label>
                    <div id="jsInputs">
                        <!-- JS 输入框将动态添加到这里 -->
                    </div>
                    <label class="label">
                        <span class="label-text-alt text-warning">注意：此设置仅在预览时生效，不会修改主题文件</span>
                    </label>
                </div>
                <div class="modal-action">
                    <button type="button" class="btn btn-ghost" onclick="closeThemeSettings()">取消</button>
                    <button type="submit" class="btn btn-primary">应用设置</button>
                </div>
            </form>
        </div>
    </dialog>

    <script src="https://cdn.bootcdn.net/ajax/libs/toastify-js/1.12.0/toastify.js"></script>
    <script src="/static/js/admin.js"></script>
</body>
</html>
